<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示商品的分类</title>
    <link rel="stylesheet" href="/js/bootstrap.min.css">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var type = $("#type");
            var pageNo = 1;
            var parentid = null;
            var total = null;
            var typename = null;

            //设置首页
            $("#first").click(function () {
                pageNo = 1;
                load();
            });

            //设置上一页
            $("#prev").click(function () {
                if (pageNo <= 1)
                    return;
                pageNo--;
                load();
            });

            //设置下一页
            $("#next").click(function () {
                if (pageNo >= total)
                    return;
                pageNo++;
                load();
            });

            //设置尾页
            $("#last").click(function () {
                pageNo = total;
                load();
            });

            //查询点击事件
            $("#button").click(function () {
                parentid = $("#parent").val();
                typename = $("#typename").val();
                pageNo = 1;
                load();
                return false;
            });

            //展示
            function load() {
                type.find("tr:gt(0)").remove();
                $.get("/applets/type/page", {
                    "parent": parentid,
                    "typename": typename,
                    "pageNo": pageNo,
                    "pageSize": 5
                }, function (da) {
                    if (da.code != 0) {
                        alert(da.msg);
                        return;
                    }
                    var map = da.data;
                    total = map.total;
                    $.each(map.list, function (i, d) {
                        type.append("<tr><td>" + d.id +
                            "</td><td>" + d.typename +
                            "</td><td><img height='50px' width='50px' src='/imgs/" + d.icon + "'>" +
                            "</td><td>" + d.orderNum +
                            "</td><td>" + getOneParent(d.parentid) +
                            "</td><td>" + getRsu(d.inuse) +
                            "</td><td><a class='btn btn-primary btn-sm' href='/applets/type/select?id=" + d.id + "'>更新</a>" +
                            "</td></td><td><input type='checkbox' value='" + d.id + "'></td></tr>")
                    })

                })
            };

            //获得父类
            function getOneParent(w) {
                var parent = null;
                $.ajax({
                    url: "/applets/type/getOnePar",
                    type: "post",
                    data: {"parentid": w},
                    async: false,
                    success: function (da) {
                        parent = da.data;
                    }
                });
                return parent;
            }

            //状态
            function getRsu(q) {
                if (q == true) {
                    return "是";
                }
                return "否";
            }

            load();

            //打开修改种类模块
            type.on("click", '#update', function () {
                getParent();
                $("#div").css('display', 'block');
                return false;
            });

            //获得父类
            function getParent() {
                $.get("/applets/type/getParent", function (da) {
                    $.each(da.data, function (i, d) {
                        $("#parents").append("<label class='radio-inline'><input type='radio' name='typename' value='" + d.id + "'>" + d.typename + "</label>")
                    });
                });
            };

            $("#button2").click(function () {
                //选中为空不行
                if ($('input:checkbox:checked').length == 0) {
                    alert("请选择要修改的种类!")
                    return;
                }
                //新建数组,插入值
                pro = new Array();
                $('input:checkbox:checked').each(function () {
                    pro.push($(this).val());
                })
                //改为字符串,方便传参
                var arrType = pro.join("-");
                $.get("/applets/type/updateParent", {
                    "arrType": arrType,
                    "parentid": $('input:radio:checked').val()
                }, function (data) {
                    alert(data.msg);
                })
            });

        })
    </script>
</head>
<body>
<div class="container">
    <h2 class="text-center">商品种类表</h2>

    <!--导航-->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="/Menu.html">返回主菜单</a>
        </li>
        <li class="nav-item">
            <a class="nav-link " href="AddType.html">种类增加</a>
        </li>
    </ul>

    <div id="div" class="container" style="display:none ">
        <label>选择种类</label>
        <form action="#" method="post">
            <div id="parents">
            </div>
            <div class="form-group">
                <input type="button" id="button2" class="form-control" value="提交">
            </div>
        </form>
    </div>

    <!--查询表单-->
    <form action="#" method="get">
        <div class="form-group">
            <label>父类分类名称</label>
            <input type="text" id="parent" class="form-control" name="parentid">
        </div>
        <div class="form-group">
            <label>分类名称(模糊)</label>
            <input type="text" id="typename" class="form-control" name="typename">
        </div>
        <div class="form-group">
            <input type="button" id="button" class="form-control" value="查找商品">
        </div>
    </form>
</div>

<div class="container">
    <table id="type" class="table table-striped">
        <thead>
        <tr>
            <th>ID</th>
            <th>分类名称</th>
            <th>图标</th>
            <th>排序</th>
            <th>上级</th>
            <th>是否可用</th>
            <th>操作</th>
            <th>
                <button type="button" class="btn btn-sm btn-light" id="update">更改种类</button>
            </th>

        </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

<div class="container offset-md-5">
    <ul class="pagination">
        <li class="page-item" id="first"><a class="page-link">首页</a></li>
        <li class="page-item" id="prev"><a class="page-link">上一页</a></li>
        <li class="page-item" id="next"><a class="page-link">下一页</a></li>
        <li class="page-item" id="last"><a class="page-link">尾页</a></li>
    </ul>
</div>

</body>
</html>